<template>
  <p>{{ duration | formatTime }}</p>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'

@Component({
  filters: {
    toSecond(time: number) {
      // time is millisecond
      let second = time / 1000
      return `${second} seconds`
    },

    formatTime(seconds: number) {
      let second = seconds % 60
      seconds = Math.floor(seconds / 60)
      let minute = seconds % 60
      seconds = Math.floor(seconds / 60)
      let hour = seconds % 60
      let pad = (num: number) => num.toString().padStart(2, '0')

      return `${pad(hour)}:${pad(minute)}:${pad(second)}`
    }
  }
})
export default class GameTime extends Vue {
  private duration: number = 0
  private intervalFn!: number

  mounted() {
    this.intervalFn = window.setInterval(() => {
      this.duration++
    }, 1000)
  }

  destroy() {
    clearInterval(this.intervalFn)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
